React Native出现的目的本就是“learn once, write anywhere”，Facebook希望人们能够学习一次，到处使用，但是同样是JS代码，从前端移植到RN，或者RN移植到前端，却并没有想象的那么容易。事实上除了语法相同外，还有很多不一样的地方，导致我们没法做到直接copy，以下是我在做迁移代码的时候，总结的一些经验

1 Antd Mobile

Antd Mobile的蚂蚁金服开源的一套UI组件，已经实现了前端、iOS、Android的三端统一UI，推荐大家多多使用

1.1 Flex

1.1.1 使用Flex的参数

多用direction justify align 属性，因为某些移动端浏览器不支持Flex功能，影响到适配，而antd已经帮我做过了，只是需要我们采用以下写法，否则无效例如：

Good:


    
     复制代码

Bad:（这种写法并没有利用到Flex本身的适配）


    
     复制代码

这样的话，因为前端的兼容性你需要写很多适配的css代码，例如

{      display: flex;      display: -webkit-flex;      flex-direction: row;      -webkit-flex-direction: row;      justify-content: flex-start;      -webkit-justify-content: flex-start;      align-items: center;      -webkit-align-items: center;}复制代码

1.1.2 显示指定flexDirection

因为某些情况下Flex无法使用，例如RN端的Touchable组件只能包裹原生组件，必须用View替代Flex，而View和Flex的默认方向是不一样的，因此显示写出flexDirection，明确告知方向，方便迁移者改动代码

Good:


    
          {...}
    复制代码

Bad:（替换成View时候方向会错）


    
          {...}
    复制代码

1.2 ListView

在RN 0.51版本下，antd的ListView会报错，还是使用RN提供的ListView，只需要修改import ListView即可，其他写法完全一致

// 不推荐import { ListView } from "antd-mobile";// 推荐import { ListView } from "react-native";复制代码

2 代码规范

2.1 尽量组件化

某些页面很复杂，常见的一种写法是将页面拆分成若干模块，每个模块写一个moduleRender函数，再在render函数里分别调用，类似以下

Bad:

class SomeComponent extends Component {      renderSubOne() {        return 
    
     {...}
    ;      }      renderSubTwo() {        return 
    
     {...}
    ;      }      renderSubThree() {        return 
    
     {...}
    ;      }      render() {         return 
    
                 {this.renderSubOne()}            {this.renderSubTwo()}            {this.renderSubThree()}          
          }}复制代码

Good:

因为迁移很可能是迁移某一部分，尽量拆分成组件迁移起来更灵活

这种写法性能更高，分开写的话每个组件有自己的生命周期，某个子组件刷新时不会影响父组件

class SomeComponent extends Component {      render() {         return 
                
                 
                 
               
          }}复制代码

2.2 不要用css

关于样式的写法，RN和前端有个显著的差别 RN:

import { StyleSheet } from "react-native";const styles = StyleSheet.create({ someContainer: {    fontSize:16,    fontWeight: 'bold',  },  ...})
    复制代码

前端：

// js 文件import CSSModules from 'react-css-modules';...@CSSModules(styles)...
    
     复制代码

// css文件.someContainer{      font-size: 16px;      font-weight: bold; }复制代码

由上面示例可知

前端的样式是藏在css文件内的，迁移起来需要一一去查找

关键字命名不同(font-size,fontSize)

而这些不同都需要我们迁移的时候一一手动修改，工作量很大

推荐的写法，是统一使用RN的写法：

// 前端js文件const styles = { // 这里不需要像RN一样，使用StyleSheet.create someContainer: {    fontSize:16,    fontWeight: 'bold',  },  ...}
    
复制代码

2.3 第三方组件

挑选第三方组件要注意

尽量使用原生，或者antd

尽量选择支持前端和移动端的

尽量选择有人维护的

如果git无人维护或者年代久远，建议将代码copy过来，而不是用npm管理，因为RN和React版本更新的原因，常常需要手动修改部分代码，才能运行，因此直接copy至工程里，比较方便

3 差异

有一些差异是前端和RN天然的差异，需要注意

3.1 Image

加载图片资源在两端写法并不一样，需要手动修改

前端：

复制代码

RN:

复制代码

3.1.1 RN的Image

需要特别注意一下的是，React Native 0.50.3以后，Image组件不再能包裹child

 // 0.50.3以后，这种写法报错      {...child...}复制代码

如果确实需要，只能用绝对位置了

3.2 Text文本

前端渲染文本有多种标签，div，span等，但是RN端只有一种Text，这在迁移时会带来很大的工作量，文本散落在各个地方，需要人工一一替换。推荐使用react-intl，RN端是react-intl-native这个有Yahoo提供的第三方组件，实现了在前端、RN端的统一

Bad:


    
     文本
    
文本复制代码

Good:


    复制代码

3.3 响应事件

前端：

// 可以添加在任何标签上
    
     {}} />
     {}} />复制代码

RN:


    
     // 只能有一个子元素，且必须是RN原生组件，不能是自定义组件  
     
       // 要用一个View来包裹更多的元素      {child}  
     
    复制代码

由上可知，点击事件迁移时，常常需要改动较多的代码

增加TouchableHighlight标签

原标签下，如果有多个子标签，那么还需要增加View来嵌套，还要注意样式保持不变

onClick改成onPress

3.4 路由跳转

前端使用react-route

RN端根据具体情况会有不同选择，例如react-navigation，react-native-navigation等

写法上会有不同，需要迁移者根据具体选择的库，手动修改

3.5 PropTypes

PropTypes是React提供的一种类型检测工具，但是随着版本的变迁，从React 15.5起，PropTypes被移出了React，形成了一个单独的库，如果前端和RN两边版本不一致，还有可能需要人工大量修改

// react version < 15.5import React, { Component, PropTypes } from 'react';// react version >= 15.5import React, { Component } from 'react';import PropTypes from 'prop-types';复制代码

3.6 全局变量

前端js代码的运行环境通常是浏览器，浏览器本身提供全局变量window，而RN端则没有，因此不要在前端使用window全局变量，而是要使用导入文件

Bad:

window.someVar = var复制代码

Good：

// 新建constants.js文件const object = {   website:'http://www.hao123.com',   name:'好123',};export default object;// 需要使用时导入import constants from './constansts.js'
    
     {constants.name}
    复制代码